<template>
    <div id="app">
    <div id="fenye" class="demo-pagination-block">
        <el-pagination v-model:current-page="currentPage4" v-model:page-size="pageSize4" :page-sizes="[100, 200, 300, 400]"
            :small="small" :disabled="disabled" :background="background" layout="total, sizes, prev, pager, next, jumper"
            :total="400" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
</div>
</div>
</template>
<script lang="ts">



import { defineComponent, ref } from 'vue'

export default defineComponent({
    name: "fenye",
    setup() {
        const currentPage4 = ref(4)
        const pageSize4 = ref(100)
        const small = ref(false)
        const background = ref(false)
        const disabled = ref(false)
        const handleSizeChange = (val: number) => {
            console.log(`${val} items per page`)
        }
        const handleCurrentChange = (val: number) => {
            console.log(`current page: ${val}`)
        }
        return {
            currentPage4,
            pageSize4,
            small,
            background,
            disabled,
            handleSizeChange,
            handleCurrentChange

        }
    }
})

</script>
<style scoped>
#app{
    width: 100%;
    display: flex;
    justify-content: end;
    align-items: center;
    background-color: white;
    font-size: 13px;
    color: #333;
}
#fenye{
    padding: 10px 20px;
}
.demo-pagination-block+.demo-pagination-block {
    margin-top: 10px;
}

.demo-pagination-block .demonstration {
    margin-bottom: 16px;
}
</style>